<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <div class="template" v-if="templateList.length>0">
                    <div @click="template(itme)" class="template-common" v-for="(itme,index) in templateList" :key="index">
                        <div class="template-common-img" :class="[field.id==itme.id? 'template-common-img-hover':'']">
                            <div class="template-common-img-icon"><my-icon type="iconicon"></my-icon></div>
                            <div class="template-common-img-previewImage">
                                <img  v-if="itme.previewImage" :src="getFilePath(itme.previewImage)"/>
                                <img v-else src="@/image/tompage.png">
                            </div>
                        </div>
                        <div class="template-common-span">{{itme.name}}</div>
                    </div>
                </div>
                <a-empty v-else style="margin-top: 100px" />
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import CustomPageTemplateApi from '@/api/portal/core/customPageTemplate'
import CustomPageTemplateEdit from './CustomPageTemplateEdit'
import {BaseList, RxFit, RxGrid, RxDialog, Util} from "@lowcode/jpaas-common-lib";

export default {
    name: 'CustomPageTemplateDialog',
    mixins: [BaseList],
    props:["layerid","destroy"],
    components: {
        RxDialog,
        RxFit
    },
    data() {
        return {
            columns: [
                {
                    title: this.$ti18('rxList.index','序号'),
                    type: 'indexColumn',
                    width: 100,
                    dataIndex: 'serial',
                    scopedSlots: {customRender: 'serial'}
                },
                {title: this.i18n('form.moduleName','模板名称'), dataIndex: 'name', width: 100},
                {title: this.$ti18('rxForm.createBy','创建人'), dataIndex: 'createByName', width: 100},
                {title: this.i18n('form.default','默认'), dataIndex: 'isDefault', width: 100,scopedSlots: {customRender: 'isDefault'}},
            ],
            component: CustomPageTemplateEdit,
            comment: this.i18n('list.comment','自定义页面模板'),
            max:true,
            fitSearch: false,
            defaultMap: {
                0: {color: 'green', text: this.i18n('isDefaultMap.yes','是')},
                1: {color: 'red', text: this.i18n('isDefaultMap.no','否')},
            },
            templateList:[],
            field:{},
        }
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"insPortalDef",key);
        },
        init(){
            var parameter = {
                params:this.queryParam
            }
            CustomPageTemplateApi.query(parameter).then(res=>{
                this.templateList = res.data
            })
        },
        getListByParams(parameter) {
            return CustomPageTemplateApi.query(parameter)
        },
        handleSubmit() {
            if(!this.field){
                this.$message.error(this.$ti18('rxMsa.masWarn.atLeastSelectOneitem', '至少选择一项！'));
                return;
            }
            Util.closeWindow(this, "ok",this.field);
        },
        cancel(){
            Util.closeWindow(this,'cancel');
        },
        getFilePath(time){
            if(time){
                return JSON.parse(time).imageUrl;
            }
        },
        template(itme){
            this.field = itme;
        },
    }
}
</script>
<style scoped>
.template-common-img-previewImage{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.template-common-img-previewImage img{
    width: 100%;
    object-fit: cover;

}
.template{
    display: flex;
    box-sizing: border-box;
}
.template-common{
    width: 240px;
    margin: 18px;
    margin-right: 0px;
    box-sizing: border-box;
}
.template-common-img{
    height: 240px;
    background-color: #f3f3f3;
    border: 1px solid #f3f3f3;
    border-radius: 4px;
    box-sizing: border-box;
    position: relative;
    overflow: initial;
    display: flex;
    cursor: pointer;
}
.template-common-img:hover{
    border: 1px solid #4285f4;
}
.template-common-img-hover{
    border: 1px solid #4285f4;
}
.template-common-img-hover .template-common-img-icon{
    display: block;
}
.template-common-img:hover .template-common-img-icon{
    display: block;
}
.template-common-img-icon{
    position: absolute;
    height:15px;
    width: 15px;
    border:15px solid;
    border-color:#4285f4  #4285f4 transparent  transparent ;
    top: -1px;
    right: 0px;
    line-height: 0px;
    display: none;
}
.template-common-img-icon i{
    margin-top: -12px;
    display: block;
    color: white;
}
.template-common-span{
    text-align: center;
    color: #303030;
    font-size: 14px;
}
</style>

